<template>
	<view class="bg-f6">
		<view class="">
			<u-navbar :is-back="false" :border-bottom="false" :background="background">
				<view class="d-flex a-center">
					<view class="p-2" @click="backtrack_img">
						<u-icon class="" name="arrow-left" color="#ffffff" size="40"></u-icon>
					</view>
					<view class="font-lg font-weight text-white mx-2">交易记录</view>
					<u-icon name="calendar" color="#ffffff" size="45" @click="popupTo"></u-icon>
				</view>	
			</u-navbar>
		</view>
		<view class="seach p-3">
			<view class="d-flex j-sb">
				<view class="font-weight text-000 font-35">本月</view>
			</view>
			<view class="d-flex mt-2">
				<view class="text-000">
					<text class="text-666">累计订单数:</text><text v-if="summary">{{summary.total_order_count}}</text>
				</view>
				<view class="ml-6">
					<text class="text-666">累计交易金额:</text><text v-if="summary">{{summary.formatted_total_order_amount}}</text>
				</view>
			</view>
		</view>
		
		<scroll-view scroll-y="true" :style="{height: scrollHeight}">
			<view class="h_100">
				<view class="h_100 d-flex j-center a-center flex-column">
					<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
					<view class="">暂无数据</view>
				</view>
				<!-- <view class="" v-else>
					<view class="bg-white btt pl-4 pr-3 " v-for="(items,indexs) in summary" :key="indexs">
							<view class="py-4 bt border-bottom">
								<view class="d-flex j-sb">
									<view class="text-999">订单</view>
									<view class="text-999">金额</view>
								</view>
								<view class="d-flex j-sb">
									<view class="font-weight">{{items.total_order_count}}</view>
									<view class="font-weight">{{items.formatted_total_order_amount}}</view>
								</view>
							</view>
					</view>
				</view> -->
			</view>
		</scroll-view>
		
		<u-popup v-model="popup_show" mode="top" :negative-top="100"> 
			<view class="">
				<view class="mx-3 d-flex flex-wrap j-sb">
					<view  @click="tabDate(item,index)" class="o-hidden position-relative span-6 py-2 date text-center mt-2 rounded-10" v-for="(item,index) in date" :key="index" :class="index===tabIndex?'date_action':''">
							{{item.name}}
							<image v-if="index===tabIndex" src="../../static/images/client/corner.png" class="position-absolute bottom-0 right-0 corner_img" mode=""></image>
					</view>
				</view>
				<view class="">
					<view class="d-flex j-sb m-3">
						<view class="font-weight font-35">自定义时间</view>
						<u-icon name="arrow-up" color="#909399" size="30"></u-icon>
					</view>
					<view class="d-flex j-sb a-center border-bottom px-5 py-2">
						<view class="span-8" @click="initiate" :class="">
							<view class="py-1 d-inline-block" :class="time_index==0?'time_action':''">
								{{initiate_time?initiate_time:'2021-04-01'}}
							</view>
						</view>
						<view class="">至</view>
						<view class="span-8 text-right" @click="conclude">
							<view class="py-1 d-inline-block" :class="time_index==1?'time_action':''">
								{{conclude_time?conclude_time:'2021-04-30'}}
							</view>
						</view>
					</view>
					<view class="d-flex j-sb py-3 border-bottom px-5" v-if="year">
						<view class="span-8">{{year}}</view>
						<view class="">{{month}}</view>
						<view class="span-8 text-right">{{day}}</view>
					</view>
				</view>
				
				<view class="sub m-2 d-flex j-sb mt-8">
					<button type="default" class="cancel" @click="cancel">取消</button>
					<button type="default" class="confirm" @click="confirm">确认</button>
				</view>
			</view>
		</u-popup>
		
		<!-- 开始 -->
		<u-picker v-model="initiate_show" mode="time" @confirm="initiate_confirm"></u-picker>
		<!-- 结束 -->
		<u-picker v-model="conclude_show" mode="time" @confirm="conclude_confirm"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					background: '#fa7226',
				},
				date:[{id:1,name:"今日",type:"today"},{id:2,name:"昨日",type:"yesterday"},{id:3,name:"本周",type:"week"},{id:4,name:"本月",type:"month"},{id:5,name:"本季",type:"season"},{id:6,name:"本年",type:"year"}],
				scrollHeight:0, // 屏幕高度
				popup_show:false, // 弹框开关
				tabIndex:'', // 下标
				time_index:0, // 时间下标
				
				initiate_show:false,// 开始 开关
				initiate_time:"", // 开始时间
				conclude_show:false, // 结束开关
				conclude_time:"", // 结束时间
				
				store_user_id:0, // 店铺会员ID
				summary:"", // 交易记录
				
				year:"", // 年
				month:"", // 月
				day:"", // 日
				
				date_type:"", // 日期
			}
		},
		onReady(e) {
			console.log(e)
			let _this=this;
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						console.log(res)
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods:{
			backtrack_img(){
				uni.navigateBack({
					delta:1
				})
			},
			// 弹框
			popupTo(){
				this.popup_show=true
			},
			// 切换日期
			tabDate(item,index){
				console.log(item,index)
				if(this.initiate_time||this.conclude_time){
					this.$u.toast("日期类型和自定义时间不可同时传	")
				}else{
					this.tabIndex=index
					this.date_type=item.type
				}
			},
			// 开始时间
			initiate(){
				if(this.date_type){
					this.$u.toast("日期类型和自定义时间不可同时传	")
				}else{
					this.time_index=0
					this.initiate_show=true	
				}
			},
			// 结束时间
			conclude(){
				if(this.date_type){
					this.$u.toast("日期类型和自定义时间不可同时传	")
				}else{
					this.time_index=1
					this.conclude_show=true	
				}
			},
			// 开始
			initiate_confirm(e){
				this.year=e.year
				this.month=e.month
				this.day=e.day
				let time=`${e.year}-${e.month}-${e.day}`;
				if(new Date(time).getTime()>new Date(this.conclude_time).getTime()){
					this.$u.toast('开始日期不能晚于结束日期')
				}else{
					this.initiate_time=time
					console.log(1)
				}
			},
			// 结束
			conclude_confirm(e){
				this.year=e.year
				this.month=e.month
				this.day=e.day
				let time=`${e.year}-${e.month}-${e.day}`;
				if(new Date(time).getTime()<new Date(this.initiate_time).getTime()){
					this.$u.toast('结束日期不能早于开始日期')
				}else{
					this.conclude_time=time
				}
			},
			// 取消
			cancel(){
				this.popup_show=false
				this.date_type=""
				this.initiate_time=""
				this.conclude_time=""
				this.tabIndex=""
				this.year=""
				this.month=""
				this.day=""
			},
			// 确定
			confirm(){
				console.log("确定")
				if(this.date_type){
					this.$H.post("v2/store/user/order/summary",{
						store_user_id:this.store_user_id,
						date_type:this.date_type,
					}).then(res=>{
						this.$u.toast("查询中")
						setTimeout(()=>{
							this.popup_show=false
							this.date_type=""
							this.initiate_time=""
							this.conclude_time=""
							this.tabIndex=""
							this.year=""
							this.month=""
							this.day=""
						},1500)
					})
				}else{
					this.$H.post("v2/store/user/order/summary",{
						store_user_id:this.store_user_id,
						start_time:this.initiate_time,
						end_time:this.conclude_time
					}).then(res=>{
						this.$u.toast("查询中")
						setTimeout(()=>{
							this.popup_show=false
							this.date_type=""
							this.initiate_time=""
							this.conclude_time=""
							this.tabIndex=""
							this.year=""
							this.month=""
							this.day=""
						},1500)
					})
				}
				
			}
		},
		onLoad(e) {
			this.store_user_id=e.store_user_id
			this.$H.post("v2/store/user/order/summary",{
				store_user_id:e.store_user_id,
				date_type:this.date_type,
			}).then(res=>{
				this.summary=res.data
				console.log(res)
			})
		}
	}
</script>

<style>
	.sub /deep/ .cancel{
		width: 45%;
		color: #fc7814;
		background: linear-gradient(to right,#FFFFFF,#FFFFFF);
		border: 1px solid #f2f6fc;
	}
	.sub /deep/ .cancel::after{
		border: none;
	}
	.sub /deep/ .confirm{
		width: 45%;
		color: #FFFFFF;
		background: linear-gradient(to right,#fc7814,#fc7814);
	}
	.date_action{
		color: #FC7814!important;
		background-color: #fff4e6!important;
	}
	.time_action{
		color: #FC7814!important;
		border-bottom: 2px solid #FC7814;
	}
	.date{
		background-color: #F6F6F6;
		color: #666666;
	}
	.corner_img{
		width: 30upx;
		height: 30upx;
	}
	.u-drawer-content{
		margin-top: 68px;
	}
	.u-mask{
		top: 68px!important;
	}
</style>
